<template>
	<div class="pay-method-con">
		<el-form labelPosition="right" label-width="180px" :model="form" class="quane-pay" :rules="rules" ref="form">
			<el-form-item label="支付方式：">
				<el-radio-group v-model="form.paymentMethod" :disabled="!canSubmit">
					<el-radio label="3">现金</el-radio>
					<el-radio label="4">刷卡</el-radio>
					<el-radio label="1">支付宝</el-radio>
					<el-radio label="2">微信</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="总金额：" prop="totalAmount">
				<el-input class="pay-method-ipt total padding-right" v-model="form.totalAmount" :maxlength="5" :readonly="!canSubmit"></el-input>
				<el-switch v-model="form.isDiscount" active-text="优惠" active-color="#ff3528" inactive-color="#cecece" :disabled="!canSubmit"></el-switch>
			</el-form-item>
			<el-form-item label="优惠金额：" v-show="form.isDiscount" prop="discountAmount">
				<el-input class="pay-method-ipt total padding-right" v-model="form.discountAmount" :maxlength="5" :readonly="!canSubmit"></el-input>
			</el-form-item>
			<el-form-item label="优惠备注：" v-show="form.isDiscount" prop="discountRemark">
				<el-input type="textarea" class="pay-method-ipt" v-model="form.discountRemark" :readonly="!canSubmit"></el-input>
			</el-form-item>
			<el-form-item label="招生业务员：">
				<el-select class="pay-method-ipt" v-model="form.clerkBh" placeholder="请选择招生业务员..." :disabled="!canSubmit">
					<el-option v-for="item in employees" :key="item.ebh" :label="item.ename+'['+item.idCard+']'" :value="item.ebh">
					</el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="备注：" prop="remark">
				<el-input type="textarea" class="pay-method-ipt" v-model="form.remark" :readonly="!canSubmit"></el-input>
			</el-form-item>
			<input type="button" class="submit-btn" v-if="canSubmit" @click="submit" value="提   交">
		</el-form>
	</div>
</template>

<script>
	export default {
		name: "tab-one",
		props: ['employees', 'stuData'],
		data() {
			return {
				canSubmit: true,
				form: {
					paymentMethod: '3',
					totalAmount: '',
					isDiscount: false,
					discountAmount: '',
					discountRemark: '',
					clerkBh: '',
					clerkName: '',
					remark: ''
				},
				rules: {
					totalAmount: [
						{required: true, message: "请输入总金额！", trigger: "blur"},
						{ max: 5, message: "最大长度 5 个字符", trigger: "blur" }
					],
					discountAmount: [
						{required: this.isDiscount, message: "请输入优惠金额！", trigger: "blur"},
					],
					discountRemark: [
						{required: this.isDiscount, message: "请输入优惠备注！", trigger: "blur"},
						{ max: 200, message: "最大长度 200 个字符", trigger: "blur" }
					],
					remark: [
						{ max: 200, message: "最大长度 200 个字符", trigger: "blur" }
					]
				}
			}
		},
		watch: {
			'form.isDiscount': function(val, old) {
				this.rules.discountAmount[0].required = val;
				this.rules.discountRemark[0].required = val;
			},
			'form.clerkBh': function(val, old) {
				let _emp = this.employees.filter((e)=>{
					return e.ebh == val;
				});
				
				if (_emp.length > 0) {
					this.form.clerkName = _emp[0].ename + '[' + _emp[0].idCard + ']';
				} else{
					this.form.clerkName = '';
				}
			},
			stuData : function(stu) {
				if (stu.pbh) {
					this.canSubmit = false;
					this.form.paymentMethod = stu.paymentMethod;
					this.form.totalAmount = stu.totalAmount;
					this.form.isDiscount = stu.discountAmount ? true : false;
					this.form.discountAmount = stu.discountAmount;
					this.form.discountRemark = stu.discountRemark;
					this.form.clerkBh = stu.clerkBh;
					this.form.remark = stu.remark;
				} else {
					Object.assign(this.$data, this.$options.data());
					this.$nextTick(()=>{
						this.$refs.form.clearValidate();
					});
				}
			}
		},
		methods: {
			submit() {
				this.$refs.form.validate(valid => {
					if (!valid) {
						return false;
					}
					if (!this.form.isDiscount) {
						this.form.discountAmount = '';
						this.form.discountRemark = '';
					}
					this.$emit('confirm', this.form);
				});
			}
		}
	}
</script>

<style>

</style>